<!doctype html>
<html lang="en">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Slide Demo - Fixed Drawer</title>
        <style type="text/css" media="screen">
            <!--
            /*************************************/
            /* Blueprint: reset.css              */

            html, body, div, span, applet, object, iframe,
            h1, h2, h3, h4, h5, h6, p, blockquote, pre,
            a, abbr, acronym, address, big, cite, code,
            del, dfn, em, font, img, ins, kbd, q, s, samp,
            small, strike, strong, sub, sup, tt, var,
            dl, dt, dd, ol, ul, li,
            fieldset, form, label, legend,
            table, caption, tbody, tfoot, thead, tr, th, td {
                margin: 0;
                padding: 0;
                border: 0;
                outline: 0;
                font-weight: inherit;
                font-style: inherit;
                font-size: 100%;
                font-family: inherit;
                vertical-align: baseline;
            }

            /* Remember to define focus styles! */
            :focus {
                outline: 0;
            }
            body {
                line-height: 1;
                color: black;
                background: white;
            }
            ol, ul {
                list-style: none;
            }

            /* Tables still need 'cellspacing="0"' in the markup. */
            table {
                border-collapse: separate;
                border-spacing: 0;
            }
            caption, th, td {
                text-align: left;
                font-weight: normal;
            }

            /* Remove possible quote marks (") from <q>, <blockquote>. */
            blockquote:before, blockquote:after,
            q:before, q:after {
                content: "";
            }
            blockquote, q {
                quotes: "" "";
            }

            /*************************************/
            /*  Demo Styles                      */
            .capt,
            .capb {
                background: url("images/caps.gif") no-repeat;
                height:4px;
                width:100%;
                /*position:absolute;*/
                z-index:100;
                margin:0px;
                padding:0px;
            }
            .capt {
                position:absolute;
                background-position:0 -4px;
            }
            .capb {
                margin-top:-19px;
            }
            #content {
                float:left;
            }
            .drawers-wrapper {
                position: relative;
                width: 188px;
                float:left;
                margin:10px;
            }
            .drawers {
                margin-bottom:15px;
                color:#76797C;
                font-size:11px;
                line-height: 18px;
            }
            .drawer {
                background:transparent url(images/sideboxlight_bg.gif) repeat-y scroll 0pt;
                color:#76797C;
                font-size:11px;
                line-height:1.3em;
                height: 1%; /* for IE6 & 7 */
            }

            .drawer-handle {
                background:#939393 url(images/slider_handlebg.png) no-repeat scroll 0pt;
                color:#333333;
                cursor:default;
                height:25px;
                line-height:25px;
                text-indent:15px;
                font-size:12px;
                width:100%;
            }
            .drawer-handle.open {
                background-color:#72839D;
                background-position:-188px 0pt;
                color:#FFFFFF;
            }

            /* nasty, but it fixes the indent on the first one. */
            h2.drawer-handle span {

            }
            .drawer ul {
                padding: 0 12px;
                padding-bottom:0pt;
            }

            /* for IE6 - to override the colour set by .drawer-handle.open (IE6 cannot handle class concatinations) */
            * html .drawer ul {
                background-color: #FFFFFF;
                margin: 0 1px;
            }

            .drawer li {
                border-bottom:1px solid #E5E5E5;
                line-height:16px;
                padding:6px 0pt;
            }
            .drawer-content ul {
                padding-top: 7px;
            }
            .drawer-content li a {
                display:block;
                overflow:hidden;
            }
            .alldownloads li {
                border:0pt none;
                line-height:18px;
                padding:0pt;
            }

            .drawers a {
                color:#666666;
                text-decoration:none;
                font-family:"Lucida Grande",Geneva,Arial,Verdana,sans-serif;
            }
            -->
        </style>

        <script type="text/javascript" src="../../../jquery-1.2.6.js"></script>

        <script type="text/javascript" src="../../../ui/ui.core.js"></script>
        <script type="text/javascript" src="../../../ui/ui.accordion.js"></script>
        <script type="text/javascript" src="../../../ui/effects.core.js"></script>


        <script type="text/javascript">
            <!--
        $(function() {
                $('ul.drawers').accordion({
                    header: 'h2.drawer-handle',
                    selectedClass: 'open',
                    //animated: 'easeOutBounce',
                    //animated: 'bounceslide',
                    //animated: 'easeslide',
                    animated: function(options) {
                        return options.down ? "easeOutBounce" : "easeInOutCubic";
                    },
                    //duration: 500,
                    duration: function(options) {
                        return options.down ? 700 : 400;
                    },
                    event: 'mouseover'
                });
            });
            //-->
        </script>
    </head>
    <body id="page">
        <div id="content">
            <h1>Fixed drawer slide out demo (using accordion plugin)</h1>
            <p>This example demonstrates the Apple downloads slider/accordion effect using the jQuery Accordion plugin.</p>
            <p>Mouse over the headings to reveal the list of available links.</p>

            <p>
                <a href="http://jqueryfordesigners.com/slide-out-and-drawer-effect/">Read the article this demonstration relates to</a>
            </p>
        </div>
        <div class="drawers-wrapper">
            <div class="capt"></div>
            <ul class="drawers">
                <li class="drawer">
                    <h2 class="drawer-handle open">
                        <span>Downloads</span>
                    </h2>
                    <ul class="alldownloads">
                        <li id="sn-downloadsmacosx"><a href="/downloads/macosx/">All Categories</a></li>
                        <li id="sn-aperture"><a href="/downloads/macosx/aperture/">Aperture</a></li>
                        <li id="sn-apple"><a href="/downloads/macosx/apple/">Apple</a></li>
                        <li id="sn-audio"><a href="/downloads/macosx/audio/">Audio</a></li>
                        <li id="sn-automator"><a href="/downloads/macosx/automator/">Automator Actions</a></li>
                        <li id="sn-businessfinance"><a href="/downloads/macosx/business_finance/">Business &amp; Finance</a></li>
                        <li id="sn-calendars"><a href="/downloads/macosx/calendars/">Calendars</a></li>
                        <li id="sn-developmenttools"><a href="/downloads/macosx/development_tools/">Development Tools</a></li>
                        <li id="sn-drivers"><a href="/downloads/macosx/drivers/">Drivers</a></li>
                        <li id="sn-emailchat"><a href="/downloads/macosx/email_chat/">Email &amp; Chat</a></li>
                        <li id="sn-finalcutstudio"><a href="/downloads/macosx/finalcutstudio/">Final Cut Studio</a></li>
                        <li id="sn-games"><a href="/downloads/macosx/games/">Games</a></li>
                        <li id="sn-homelearning"><a href="/downloads/macosx/home_learning/">Home &amp; Learning</a></li>
                        <li id="sn-iconsscreensavers"><a href="/downloads/macosx/icons_screensavers/">Icons, Screensavers, etc.</a></li>
                        <li id="sn-imaging3d"><a href="/downloads/macosx/imaging_3d/">Imaging &amp; 3D</a></li>
                        <li id="sn-internetutilities"><a href="/downloads/macosx/internet_utilities/">Internet Utilities</a></li>
                        <li id="sn-ipoditunes"><a href="/downloads/macosx/ipod_itunes/">iPod + iTunes</a></li>
                        <li id="sn-mathscience"><a href="/downloads/macosx/math_science/">Math &amp; Science</a></li>
                        <li id="sn-networkingsecurity"><a href="/downloads/macosx/networking_security/">Networking &amp; Security</a></li>
                        <li id="sn-productivitytools"><a href="/downloads/macosx/productivity_tools/">Productivity Tools</a></li>
                        <li id="sn-spotlight"><a href="/downloads/macosx/spotlight/">Spotlight Plugins</a></li>
                        <li id="sn-systemdiskutilities"><a href="/downloads/macosx/system_disk_utilities/">System/Disk Utilities</a></li>
                        <li id="sn-unixopensource"><a href="/downloads/macosx/unix_open_source/">UNIX &amp; Open Source</a></li>
                        <li id="sn-video"><a href="/downloads/macosx/video/">Video</a></li>
                        <li id="sn-dashboard"><a href="/downloads/dashboard/" class="bottom">Widgets</a></li>
                    </ul>
                </li>
                <li class="drawer">
                    <h2 class="drawer-handle">Top Downloads</h2>
                    <ul>
                        <li><a title="iTunes 7.5" href="http://www.apple.com/itunes/download/">1. iTunes 7.5</a></li>
                        <li><a title="QuickTime 7.3.1" href="http://www.apple.com/quicktime/download/">2. QuickTime 7.3.1</a></li>
                        <li><a title="Safari 3 Public Beta" href="http://www.apple.com/safari/download/">3. Safari 3 Public Beta</a></li>
                        <li><a title="MacPool" href="/downloads/macosx/games/simulation_and_sports/macpool.html">4. MacPool Realistic and easy to play computer simu…</a></li>
                        <li><a title="Guitar Hero III: Legends of Rock" href="/downloads/macosx/games/demos_updates/guitarheroiiilegendsofrock.html">5. Guitar Hero III: L…</a></li>
                        <li><a title="Messenger for Mac" href="/downloads/macosx/email_chat/messengerformac.html">6. Messenger for Mac</a></li>
                        <li><a title="Google Earth" href="/downloads/macosx/home_learning/googleearth.html">7. Google Earth</a></li>
                        <li><a title="Monopoly" href="/downloads/macosx/games/cards_puzzle/monopoly.html">8. Monopoly</a></li>
                        <li><a title="Litho System Icons" href="/downloads/macosx/icons_screensavers/lithosystemicons.html">9. Litho System Icons</a></li>
                        <li><a title="Battlefield 2142" href="/downloads/macosx/games/demos_updates/battlefield2142.html">10. Battlefield 2142</a></li>
                        <li><a title="More iChat Effects" href="/downloads/macosx/email_chat/moreichateffects.html">11. More iChat Effects</a></li>
                        <li><a title="Dragster" href="/downloads/macosx/internet_utilities/dragster.html">12. Dragster</a></li>
                        <li><a title="iSquint" href="/downloads/macosx/ipod_itunes/isquint.html">13. iSquint</a></li>
                        <li class="last"><a title="US Holiday Calendar" href="/downloads/macosx/calendars/usholidaycalendar.html">14. US Holiday Calendar</a></li>
                    </ul>
                </li>
                <li class="drawer last">
                    <h2 class="drawer-handle">Top Apple Downloads</h2>
                    <ul>
                        <li><a title="iTunes 7.5" href="http://www.apple.com/itunes/download/">1. iTunes 7.5</a></li>
                        <li><a title="QuickTime 7.3.1" href="http://www.apple.com/quicktime/download/">2. QuickTime 7.3.1</a></li>
                        <li><a title="Safari 3 Public Beta" href="http://www.apple.com/safari/download/">3. Safari 3 Public Beta</a></li>
                        <li><a title="Mac OS X 10.5.1 Update" href="/downloads/macosx/apple/macosx_updates/macosx1051update.html">4. Mac OS X 10.5.1 Up…</a></li>
                        <li><a title="Java for Mac OS X 10.4 Release 5" href="/downloads/macosx/apple/macosx_updates/javaformacosx104release5.html">5. Java for Mac OS X …</a></li>
                        <li><a title="iPod Reset Utility 1.0.2 for Windows" href="/downloads/macosx/apple/ipod_itunes/ipodresetutility102forwindows.html">6. iPod Reset Utility…</a></li>
                        <li><a title="iPhoto 7.1.1" href="/downloads/macosx/apple/application_updates/iphoto711.html">7. iPhoto 7.1.1</a></li>
                        <li><a title="Bonjour for Windows" href="/downloads/macosx/apple/windows/bonjourforwindows.html">8. Bonjour for Windows</a></li>
                        <li><a title="Mac OS X 10.4.11 Combo Update (PPC)" href="/downloads/macosx/apple/macosx_updates/macosx10411comboupdateppc.html">9. Mac OS X 10.4.11 C…<br/>The 10.4.11 Update is recommended for al…</a></li>
                        <li><a title="Java for Mac OS X 10.4, Release 6" href="/downloads/macosx/apple/macosx_updates/javaformacosx104release6.html">10. Java for Mac OS X …</a></li>
                        <li><a title="GarageBand 4.1.1" href="/downloads/macosx/apple/application_updates/garageband411.html">11. GarageBand 4.1.1</a></li>
                        <li><a title="iPod Updater 2006-06-28 for Windows" href="/downloads/macosx/apple/ipod_itunes/ipodupdater20060628forwindows.html">12. iPod Updater 2006-…</a></li>
                        <li><a title="Security Update 2007-009 1.1 (10.4.11 Universal)" href="/downloads/macosx/apple/security_updates/securityupdate20070091110411universal.html">13. Security Update 20…</a></li>
                        <li class="last"><a title="Security Update 2007-009 1.1 (10.5.1)" href="/downloads/macosx/apple/security_updates/securityupdate2007009111051.html">14. Security Update 20…</a></li>
                    </ul>
                </li>
            </ul>
            <div class="capb"></div>
        </div>
    </body>
</html>
